import React, { Component } from "react";
import { connect } from "react-redux";
import Header from "../../components/Header/Header";
import { Button, Toast } from "antd-mobile";
import "./Detail.less";
import {actions,getInfo} from "../../store/modules/detail"
import { bindActionCreators } from "redux";

class Detail extends Component {
    componentDidMount(){
        this.props.detail.getDetail(this.props);
    }
  render() {
      let {info,detail:{addShop}} = this.props;
    return (
      <>
        <Header back title="商品详情"></Header>
        <div className="detail_main">
          <div className="banner_img">
            <img src={info.img} alt="" />
          </div>
          <div className="content">
            <div className="price">
              <span className="time_text">限时</span>
              <span className="nowPrice">&yen;{info.price}</span>
              <span className="marketPrice">&yen;{info.market_price}</span>
            </div>
            <p className="title">{info.goodsname}</p>
            <p className="desc">{info.description}</p>
          </div>
        </div>

        <footer className="foot">
          <div className="item">
            <span className="iconfont icon-kefu"></span>
            <span>客服</span>
          </div>
          <div className="item">
            <span className="iconfont icon-dianpu"></span>
            <span>店铺</span>
          </div>
          <div
            className="item"
            onClick={() => this.props.history.push("/index/shop")}
          >
            <span className="iconfont icon-shouye"></span>
            <span>购物车</span>
          </div>
          <Button
            color="warning"
            onClick={() => addShop()}
            className="btn1"
          >
            加入购物车
          </Button>
          <Button color="danger" className="btn2">
            立即购买
          </Button>
        </footer>
      </>
    );
  }
}
const mapStateToProps = (state) => {
  return {
      info:getInfo(state)
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      detail:bindActionCreators(actions,dispatch)
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Detail);
